window.addEventListener('load', function () {

    // 获取元素
    var previewImg = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var bigBox = document.querySelector('.big_box');
    var bigImg = document.querySelector('.big_img');
    // 鼠标移入显示mask与大图
    previewImg.addEventListener('mousemove', function (e) {

        mask.style.display = 'block';
        bigBox.style.display = 'block';

        // 获取鼠标在previewImg中的坐标
        var x = e.pageX - previewImg.offsetLeft;
        var y = e.pageY - previewImg.offsetTop;
        // console.log(x + ' ' + y);
        // 获取mask在left和top两侧的值
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;

        // 限制mask不能移出previewImg
        // 获取X,Y方向上能移动的最大值
        var maskMaxX = previewImg.offsetWidth - mask.offsetWidth;
        var maskMaxY = previewImg.offsetHeight - mask.offsetHeight;
        // 把鼠标坐标给mask
        if (maskX < 0) {
            maskX = 0;
        } else if (maskX > maskMaxX) {
            maskX = maskMaxX;
        } else {
            mask.style.left = maskX + 'px';
        }

        if (maskY < 0) {
            maskY = 0;
        } else if (maskY > maskMaxY) {
            maskY = maskMaxY;
        } else {
            mask.style.top = maskY + 'px';
        }

        // 移动bigBox
        // bigImg在X,Y方向上能移动的最大距离
        var bigBoxX = bigImg.offsetWidth - bigBox.offsetWidth;
        var bigBoxY = bigImg.offsetHeight - bigBox.offsetHeight;
        // console.log(bigBoxX);
        // console.log(bigImg.offsetWidth);

        // 大图的position值，与小图等比例移动
        bigImg.style.left = -maskX * bigBoxX / maskMaxX + 'px';
        bigImg.style.top = -maskY * bigBoxY / maskMaxY + 'px';


    });

    // 鼠标移出则隐藏mask与大图
    previewImg.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        bigBox.style.display = 'none';
    });






});